<template>
  <div class="home">
    <!-- 头部区域 -->
    <header>
      <h1>{{ pageTitle }}</h1>
      <button @click="toggleDarkMode">Toggle Dark Mode</button>
    </header>

    <!-- 主体内容区域 -->
    <main>
      <section v-for="(post, index) in posts" :key="index" class="post">
        <h2>{{ post.title }}</h2>
        <p>{{ post.description }}</p>
        <a :href="post.link" target="_blank">Read More</a>
      </section>
    </main>

    <!-- 底部区域 -->
    <footer>
      <p>&copy; {{ currentYear }} Your Company Name</p>
    </footer>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref} from 'vue';

interface Post {
  title: string;
  description: string;
  link: string;
}

export default defineComponent({
  name: 'Home',
  setup() {
    // 数据状态
    const pageTitle = ref<string>('Welcome to Our Homepage');
    const isDarkMode = ref<boolean>(false);
    const posts: Post[] = [
      {
        title: 'Article 1',
        description: 'A brief summary of Article 1',
        link: 'https://example.com/article1',
      },
      {
        title: 'Article 2',
        description: 'An intriguing introduction to Article 2',
        link: 'https://example.com/article2',
      },
      // 更多文章...
    ];

    // 计算属性
    const currentYear = () => new Date().getFullYear();

    // 方法
    const toggleDarkMode = () => {
      isDarkMode.value = !isDarkMode.value;
      document.body.classList.toggle('dark-mode', isDarkMode.value);
    };

    return {
      pageTitle,
      isDarkMode,
      posts,
      currentYear,
      toggleDarkMode,
    };
  },
});
</script>

<style scoped>
.home {
  /* 样式代码，可以根据需要添加 */
}

.dark-mode {
  /* 暗黑模式样式 */
}
</style>
